<template>
  <div class="form-item--label_select pointer" @click="handleKeywordClick">
    <slot>
      <span>{{ keyword.value }}</span>
    </slot>
    <div class="arrow"></div>
    <Select id="label_select" clearable @on-change="handleKeywordChange">
      <Option v-for="(nt, i) of keywords" :key="i" :value="nt.key">{{ nt.value }}</Option>
    </Select>
  </div>
</template>

<script>
export default {
  name: 'KeywordsSelect',

  props: {
    keyword: {
      type: Object,
      required: true,
    },

    keywords: {
      type: Array,
      default: () => [
        { key: 'title', value: '标题' },
        { key: 'username', value: '用户' },
      ],
    },
  },

  data() {
    return {}
  },

  methods: {
    handleKeywordClick() {
      const e = document.querySelector('#label_select') || {}
      const a = e.querySelector('.ivu-select-selection')
      a && a.click()
    },

    handleKeywordChange(a) {
      this.$emit(
        'update:keyword',
        this.keywords.find((it) => it.key === a),
      )
    },
  },
}
</script>

<style lang="less" scoped></style>
